<template>
	<view class="coupon-box flex">
		<view class="tabList w100">
			<up-tabs :current="contentIndex" @change="changeTab" :activeStyle="{
				'fontWeight': 'bold',
				'fontSize': '30rpx',
				'color': 'rgba(255,255,255,0.87)'
			}" lineColor="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" :inactiveStyle="{
			 	'fontWeight': 500,
			 	'fontSize': '30rpx',
			 	'color': 'rgba(255,255,255,0.6)'
			 }" :list="tabList"></up-tabs>
		</view>
		<view class="content w100">
			<swiper class="swiper-content w100" @change="changeSwiper" :current="contentIndex">
				<!-- 未使用 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" :refresher-enabled="true" :refresher-triggered="triggered"
						@scrolltolower="getMoreCoupon">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="useCouponInfo.list.length>0">
								<view class="content-list" v-for="(item,index) in useCouponInfo.list" :key="item.id">
									<couponItem type="useList" :couponInfo="item"></couponItem>
								</view>
								<view class="view-more" @click="getMoreCoupon">
									<up-loadmore :status="useCouponInfo.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无未使用优惠券~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已使用 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" :refresher-enabled="true" :refresher-triggered="triggered"
						@scrolltolower="getMoreCoupon">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="usedCouponInfo.list.length>0">
								<view class="content-list" v-for="(item,index) in usedCouponInfo.list" :key="index">
									<loseCouponItem type="used" :couponInfo="item"></loseCouponItem>
								</view>
								<view class="view-more" @click="getMoreCoupon">
									<up-loadmore :status="usedCouponInfo.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无已使用优惠券~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 已过期 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" refresher-enabled :refresher-triggered="triggered"
						@scrolltolower="getMoreCoupon">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="expireCoupon.list.length>0">
								<view class="content-list" v-for="(item,index) in expireCoupon.list" :key="index">
									<loseCouponItem type="expire" :couponInfo="item"></loseCouponItem>
								</view>
								<view class="view-more" @click="getMoreCoupon">
									<up-loadmore :status="expireCoupon.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无已过期优惠券~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 领券中心 -->
				<swiper-item class="swiper-content-item w100">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @refresherrefresh="onRefresh"
						refresher-default-style="white" refresher-enabled :refresher-triggered="triggered"
						@scrolltolower="getMoreCoupon">
						<view class="w100" style="padding: 20rpx 30rpx;">
							<template v-if="couponInfo.list.length>0">
								<view class="content-list" v-for="(item,index) in couponInfo.list" :key="item.id">
									<couponItem type="center" :couponInfo="item"></couponItem>
								</view>
								<view class="view-more" @click="getMoreCoupon">
									<up-loadmore :status="couponInfo.status" />
								</view>
							</template>
							<view class="not-list-view" v-else>
								<text class="text">暂无可领取优惠券~</text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import couponItem from '@/components/coupon/couponItem.vue';
	import loseCouponItem from '@/components/coupon/loseCouponItem.vue';
	const contentIndex = ref(0)
	const loadingIndex = [0]; //已经加载得item
	const tabList = reactive([{
			name: '未使用'
		},
		{
			name: '已使用'
		},
		{
			name: '已过期'
		},
		{
			name: '领券中心'
		}
	]);
	const triggered = ref(false);
	const couponInfo = reactive({
		list: [],
		page: 1,
		status: 'loadmore',
	});
	const useCouponInfo = reactive({
		list: [],
		page: 1,
		status: 'loadmore'
	});
	const usedCouponInfo = reactive({
		list: [],
		page: 1,
		status: 'loadmore'
	});
	const expireCoupon = reactive({
		list: [],
		page: 1,
		status: 'loadmore'
	});
	onLoad(() => {
		getUserUseList()
	})
	const getMoreCoupon = () => {
		let e = contentIndex.value;
		if (e == 0) {
			if (useCouponInfo.status == 'loading' || useCouponInfo.status == 'nomore') return;
			useCouponInfo.status = 'loading';
			setTimeout(() => {
				getUserUseList()
			}, 300)
		} else if (e == 1) {
			if (usedCouponInfo.status == 'loading' || usedCouponInfo.status == 'nomore') return;
			usedCouponInfo.status = 'loading';
			setTimeout(() => {
				getUserUsedList()
			}, 300)
		} else if (e == 2) {
			if (expireCoupon.status == 'loading' || expireCoupon.status == 'nomore') return;
			expireCoupon.status = 'loading';
			setTimeout(() => {
				getUserExpireList()
			}, 300)
		} else if (e == 3) {
			if (couponInfo.status == 'loading' || couponInfo.status == 'nomore') return;
			couponInfo.status = 'loading';
			setTimeout(() => {
				getCouponList()
			}, 300)
		}

	}
	const getCouponList = async () => {
		const res = await $Api.coupon.getCouponList({
			page: couponInfo.page
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					let is_amount_end = 0; //库存状态
					if (val.received && val.total) {
						is_amount_end = val.total - val.received > 0 ? 0 : 1
					}
					if (val.rate) {
						val.rate = (val.rate / 10).toFixed(2)
					}
					return {
						...val,
						is_amount_end
					}
				})
				couponInfo.list = [...couponInfo.list, ...arr];
			}
			if (res.data.totalPage > couponInfo.page) {
				couponInfo.status = 'loadmore';
				couponInfo.page++;
			} else {
				couponInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	};
	const getUserUseList = async () => { //获取用户未使用优惠券列表
		const res = await $Api.coupon.getUserCouponList({
			page: useCouponInfo.page,
			status: 0
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.rate) {
						val.rate = (val.rate / 10).toFixed(2)
					}
					return {
						...val
					}
				})
				useCouponInfo.list = [...useCouponInfo.list, ...arr];
			}
			if (res.data.totalPage > useCouponInfo.page) {
				useCouponInfo.status = 'loadmore';
				useCouponInfo.page++;
			} else {
				useCouponInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const getUserUsedList = async () => { //获取用户已使用优惠券列表
		const res = await $Api.coupon.getUserCouponList({
			page: usedCouponInfo.page,
			status: 1
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.rate) {
						val.rate = (val.rate / 10).toFixed(2)
					}
					return {
						...val
					}
				})
				usedCouponInfo.list = [...usedCouponInfo.list, ...arr];
			}
			if (res.data.totalPage > usedCouponInfo.page) {
				usedCouponInfo.status = 'loadmore';
				usedCouponInfo.page++;
			} else {
				usedCouponInfo.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const getUserExpireList = async () => { //获取已过期
		const res = await $Api.coupon.getUserCouponList({
			page: expireCoupon.page,
			status: 2
		})
		setTimeout(() => { //重置下拉刷新
			triggered.value = false;
		}, 300)
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = []
				arr = res.data.list.map(val => {
					if (val.rate) {
						val.rate = (val.rate / 10).toFixed(2)
					}
					return {
						...val
					}
				})
				expireCoupon.list = [...expireCoupon.list, ...arr];
			}
			if (res.data.totalPage > expireCoupon.page) {
				expireCoupon.status = 'loadmore';
				expireCoupon.page++;
			} else {
				expireCoupon.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg)
		}
	}
	const restList = () => {
		let e = contentIndex.value;
		if (e == 0) {
			useCouponInfo.list = []
			useCouponInfo.page = 1
			useCouponInfo.status = 'loadmore'
		} else if (e == 1) {
			usedCouponInfo.list = []
			usedCouponInfo.page = 1
			usedCouponInfo.status = 'loadmore'
		} else if (e == 2) {
			expireCoupon.list = []
			expireCoupon.page = 1
			expireCoupon.status = 'loadmore'
		} else if (e == 3) {
			couponInfo.list = []
			couponInfo.page = 1
			couponInfo.status = 'loadmore'
		}

	}
	const changeSwiper = (e) => {
		let index = e.detail.current;
		contentIndex.value = index;
		triggered.value = false;
		if (loadingIndex.includes(index)) return;
		loadingIndex.push(index)
		changeIndex(index)
	}
	const changeTab = (e) => {
		contentIndex.value = e.index
	}
	const onRefresh = () => { //下拉刷新
		if (triggered.value) return;
		triggered.value = true;
		restList()
		changeIndex(contentIndex.value)
	};
	const changeIndex = (e) => {
		if (e == 0) {
			getUserUseList()
		} else if (e == 1) {
			getUserUsedList()
		} else if (e == 2) {
			getUserExpireList()
		} else if (e == 3) {
			getCouponList()
		}
	}
</script>
<style>
	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
<style lang="scss" scoped>
	.coupon-box {
		flex-direction: column;
		height: 100vh;

		.content {
			flex: 1;
			// padding: 20rpx 0;
			box-sizing: border-box;
		}

		.swiper-content {
			height: 100%;
		}

		.swiper-content-item {
			height: 100%;

			.content-list {
				margin-bottom: 28rpx;
			}
		}
	}
</style>